<template>
    <div class="maindiv" ref="refdiv">
        <!--头部模块-->
        <div class="Touristportrait">
            <div class="weather">
                <div class="fanhuimain" @click="gohome"><img src="../../../assets/largescreen/y19.png" alt=""></div>
                <div class="weatherimg"><img :src="qihouimg" alt=""></div>
                <div class="weathertext">{{tianqi}} {{wendu}}℃</div>
            </div>
            <div class="Navigation">
                <div class="Navigationleft">
                    <div class="Navigationimg " @click="go1">游客画像</div>
                    <div class="Navigationimg selectdada" style="margin-left: 20px" @click="go3">酒店民宿</div>
                </div>
                <div class="Navigationmiddle">  <img src="../../../assets/largescreen/y18.png" alt=""></div>
                <div class="Navigationright">
                    <div class="Navigationimgright" @click="go4">交通</div>
                    <div class="Navigationimgright" style="margin-left: 20px" @click="go2">景区</div>
                </div>
            </div>
            <div class="mydate">
                {{nowDate}} {{week}}
            </div>
        </div>
        <!--下方模块-->
        <div class="Touristbottomportrait">
            <!--左侧模块-->
            <div class="Leftsidemodule">
                <div class="modulediv divbg">
                    <div class="moduledivtop">
                        游客住宿分析
                    </div>
                    <div class="chartBox">
                        <div class="cb_chart" ref="ykzsfxChart"></div>
                    </div>
                </div>
                <div class="modulediv divbg">
                    <div class="moduledivtop">
                        入住率同比分析
                    </div>
                    <div class="chartBox">
                        <div class="cb_chart" ref="rzltbfxChart"></div>
                        <div class="cb_tab">
                            <div :class="tidx==1?'active':''" @click="changeRzlType(1)">月</div>
                            <div :class="tidx==2?'active':''" @click="changeRzlType(2)">年</div>
                        </div>
                    </div>
                </div>
                <div class="modulediv divbg">
                    <!-- <div class="moduledivtop">
                        酒店预约排行榜(月)
                    </div>
                    <div class="tableDiv tableDiv_phb">
                        <vue-seamless-scroll ref="vueSeamlessPhbRef" class="scroll-list-seamless-phb" :data="copyDataPhb" :class-option="defaultOption" >
                            <ul class="ul-scoll">
                                <li v-for="(item,index) in hotelOrderList" :key="index" class="td_item">
                                    <div class="tdi_left">
                                        <div class="tdil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                        <div class="tdil_name">{{ item.name }}</div>
                                    </div>
                                    <div class="tdi_right">{{ item.num }}</div>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div> -->
                    <div class="moduledivtop">
                        节假日入住分析
                    </div>
                    <div class="chartBox">
                        <div class="cb_title">
                            <img src="../../../assets/largescreen/jdms_user.png">
                            <p>年度累计客流<span>{{ jjrYearPersonNum }}</span>人次</p>
                        </div>
                        <div class="cb_chart cb_chart_jjr">
                            <div ref="jjrrzfxChart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--中间模块-->
            <div class="Intermediatemodule">
                <div class="modulediv modulediv_jzyx">
                    <div class="numsdiv">
                        <div class="numsdiv_pre">
                            <div class="np_title">今日订单数</div>
                            <div class="np_num">
                                <div class="npn_item" v-for="(num,idx) in todayNums" :key="idx">{{ num }}</div>
                                <div class="npn_dw">单</div>
                            </div>
                        </div>
                        <div class="numsdiv_pre numsdiv_pre_mszs">
                            <div class="np_title">今日预约数</div>
                            <div class="np_num">
                                <div class="npn_item" v-for="(num,idx) in hotelNums" :key="idx">{{ num }}</div>
                                <div class="npn_dw">个</div>
                            </div>
                        </div>
                        <div class="numsdiv_pre">
                            <div class="np_title">今日入住数</div>
                            <div class="np_num">
                                <div class="npn_item" v-for="(num,idx) in hotelRoomNUms" :key="idx">{{ num }}</div>
                                <div class="npn_dw">个</div>
                            </div>
                        </div>
                    </div>
                    <div class="md_map">
                        <div class="mapdiv">
                            <div class="mapdiv_town"
                                :class="townIndex===index?'town_active':''"
                                :style="town.style"
                                v-for="(town,index) in townList"
                                :key="index"
                                @click="changeTown(town.id,index)"
                            >{{ town.name }}</div>
                        </div>
                    </div>
                </div>
                <div class="modulediv divbg">
                    <div class="moduledivtop">
                        年度预约趋势
                    </div>
                    <div class="chartBox">
                        <div class="cb_chart" ref="ndyyqsChart"></div>
                    </div>
                </div>
            </div>
            <!--右侧模块-->
            <div class="Rightmodule">
                <div class="modulediv divbg">
                    <div class="moduledivtop">
                        近7天预约趋势
                    </div>
                    <div class="chartBox">
                        <div class="cb_chart" ref="yyqsChart"></div>
                    </div>
                </div>
                <div class="modulediv divbg modulediv_jzyx">
                    <div class="moduledivtop">
                        游客精准营销
                    </div>
                    <div class="mjzyx_top">
                        <div class="mjzyxt_item">
                            <div class="mti_text">广告精准投放</div>
                            <div class="mti_num">1310<span>次</span></div>
                        </div>
                        <div class="mjzyxt_item">
                            <div class="mti_text">旅行社推广</div>
                            <div class="mti_num">6785<span>次</span></div>
                        </div>
                    </div>
                    <div class="mpm_title">客流排名</div>
                    <div class="mjzyx_pm">
                        <vue-seamless-scroll ref="vueSeamlessRef" class="scroll-list-seamless" :data="copyDataRank" :class-option="defaultOption" >
                            <ul class="ul-scoll">
                                <li v-for="(item,index) in klRankingList" :key="index" class="mpm_item">
                                    <div class="mpmi_left">
                                        <div class="mpmil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                        <div class="mpmil_city">{{ item.city }}</div>
                                        <div class="mpmil_line"></div>
                                        <div class="mpmil_bl">
                                            <div class="mpmil_bl_bfb" :style="{'width':item.bl+'%'}"></div>
                                        </div>
                                    </div>
                                    <div class="mpmi_right">{{ item.num }}人次</div>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </div>
        <!--底部美化图-->
        <div class="Bottomlandscaping">
        </div>

    </div>


</template>

<script>
  import * as echarts from "echarts";
  import 'echarts-gl';
  import { detectZoom } from '@/utils/detectZoom';
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    name: '',
    components: {
        vueSeamlessScroll
    },
    data () {
      return {
          tianqi: '',
          wendu: '',
          qihouimg: '',
          windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
          windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
        nowDate:'',
        week:'',
        todayNums:[],
        hotelNums:[],
        hotelRoomNUms:[],
        tidx:2,
        hotelOrderList:[],
        klRankingList:[],
        myislandId:[],
        hotelDict:{
            "Comfortable":"舒适型",
            "HighClass":"高档型",
            "HighHomestay":"高端民宿",
            "Economy":"经济型",
            "OrdinaryHomestay":"普通民宿"
        },
		copyDataPhb: [],
		copyDataRank: [],
        townList:[
            {id:['4164678933'],name:'花鸟乡',style:{'left': '60.96%','top': '6.94%'}},
            {id:['1721484186251956225','1730426782508650497'],name:'洋山镇',style:{'left': '11.57%','top': '47.62%'}},
            {id:['5554544444'],name:'菜园镇',style:{'left': '35.48%','top': '45.04%'}},
            {id:['5554544444'],name:'五龙乡',style:{'left': '56.40%','top': '44.05%'}},
            {id:['1346784662'],name:'枸杞乡',style:{'left': '74.53%','top': '48.81%'}},
            {id:['4545454544'],name:'嵊山镇',style:{'left': '88.65%','top': '45.63%'}},
            {id:['5645645645'],name:'黄龙乡',style:{'left': '60.51%','top': '70.83%'}}
        ],
        townIndex:'',
        jjrYearPersonNum:0
      }
    },
      watch: {
          windowHeight (val) {
              let that = this;
              console.log("实时屏幕高度：",val, that.windowHeight );
          },
          windowWidth (val) {
              let that = this;
              console.log("实时屏幕宽度：",val, that.windowHeight );
          }
      },
    mounted() {
        const m = detectZoom();
        this.$refs.refdiv.style.zoom = 100 / Number(m);

      //启动定时器
      this.nowtime = setInterval(() => {
        this.getTime()
      }, 1000)
      //图表初始化
      this.initTopData();//头部统计数据
      this.initChartYkzsfx();//游客住宿分析
      this.initChartRzltbfx(this.tidx);//入住率同比分析
    //this.getDataHotelOrderMonth();//酒店预约排行榜(月)
      this.initCahrtJjrrzfx();//节假日入住分析
      this.initChartYyqs();//近7天预约趋势
      this.initChartNdyyqs();//年度预约趋势
      this.getDataRank();//游客精准营销
        var that = this;
        // <!--把window.onresize事件挂在到mounted函数上-->
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                that.windowHeight = window.fullHeight;  // 高
                that.windowWidth = window.fullWidth; // 宽
            })()
        };
        this.getweather();
    },
    computed: {
        defaultOption () {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    methods: {
      dateFormat(date, format) {
        format = format || 'yyyy-MM-dd hh:mm:ss'
        if (date !== 'Invalid Date') {
          let o = {
            'M+': date.getMonth() + 1, //month
            'd+': date.getDate(), //day
            'h+': date.getHours(), //hour
            'm+': date.getMinutes(), //minute
            's+': date.getSeconds(), //second
            'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
            S: date.getMilliseconds(), //millisecond
          }
          if (/(y+)/.test(format))
            format = format.replace(
              RegExp.$1,
              (date.getFullYear() + '').substr(4 - RegExp.$1.length)
            )
          for (let k in o)
            if (new RegExp('(' + k + ')').test(format))
              format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1
                  ? o[k]
                  : ('00' + o[k]).substr(('' + o[k]).length)
              )
          return format
        }
        return ''
      },
      //获取实时日期
      //获取实时日期
      getTime() {
        const dataTime = new Date()
        this.nowDate = this.dateFormat(dataTime, 'yyyy年MM月dd')
        let w = ['日', '一', '二', '三', '四', '五', '六']
        let xinqi = dataTime.getDay()
        this.week = '星期' + w[xinqi] //星
      },
        gohome(){
            this.$router.replace({ path: '/home' })
        },
        getweather(){
            let that=this;
            //加载天气查询插件
            AMap.plugin('AMap.Weather', function() {
                //创建天气查询实例
                let weather = new AMap.Weather();
                //执行实时天气信息查询
                weather.getLive('嵊泗县', function(err, data) {
                    if (data.info == 'OK') {
                        //   console.log('111111111111111111',data.weather,data.temperature)
                        that.tianqi = data.weather;
                        that.wendu = data.temperature;

                        if (data.weather.indexOf("晴") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                        } else if (data.weather.indexOf("暴雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                        } else if (data.weather.indexOf("暴雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                        } else if (data.weather.indexOf("冰雹") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                        } else if (data.weather.indexOf("大雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                        } else if (data.weather.indexOf("大雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                        } else if (data.weather.indexOf("多云") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                        } else if (data.weather.indexOf("雷阵雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                        } else if (data.weather.indexOf("雾") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                        } else if (data.weather.indexOf("小到中雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                        } else if (data.weather.indexOf("小雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                        } else if (data.weather.indexOf("小雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                        } else if (data.weather.indexOf("阴") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                        } else if (data.weather.indexOf("雨夹雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                        } else if (data.weather.indexOf("阵雨@") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                        } else if (data.weather.indexOf("中到大雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                        } else if (data.weather.indexOf("中雪") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                        } else if (data.weather.indexOf("中雨") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                        }else if (data.weather.indexOf("霾") != -1) {
                            that.qihouimg =
                                'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                        }

                    }
                });
            });
        },
        go1 () {
            this.$router.push({ path: '/cockpit-cockpitjd1' })
        },
        go2 () {
            this.$router.push({ path: '/cockpit-cockpitjj1'})
        },
        go3 () {
            this.$router.push({ path: '/cockpit-cockpityk1' })
        },
        go4 () {
            this.$router.push({ path: '/cockpit-cockpitjt1' })
        },
      //头部统计数据
      initTopData(){
        this.todayNums = [];
        this.hotelNums = [];
        this.hotelRoomNUms = [];
        this.$http.post('/sys/hotel/screen/getHotelScreenCount',{
            islandIds:this.myislandId
        }).then(res=>{
            if(res.data.code===0){
                let tbr = (res.data.data.todayOrders||0)+'';
                let hn = (res.data.data.todayBooks||0)+'';
                let tr = (res.data.data.todayCheckIns||0)+'';
                for (let i=0;i<tbr.length;i++){this.todayNums.push(tbr.substr(i,1))};
                for (let i=0;i<hn.length;i++){this.hotelNums.push(hn.substr(i,1))};
                for (let i=0;i<tr.length;i++){this.hotelRoomNUms.push(tr.substr(i,1))};
            }else this.$message.error(res.data.msg);
        })
      },
      //游客住宿分析
      initChartYkzsfx(){
        this.$http.post('/sys/hotel/screen/getHotelStayAnalysis',{
            islandIds:this.myislandId
        }).then(res=>{
            if(res.data.code===0){
                let chartData = [];
                if(res.data.data){
                    res.data.data.sort((a,b)=>{return b.ratio-a.ratio});
                    res.data.data.forEach(d=>{
                        chartData.push({
                            name:this.hotelDict[d.category]||'其他',
                            value:d.visitorNums||0,
                            bl:(d.ratio||0)+'%'
                        })
                    })
                }
                this.initChartYkzsfxChart(chartData);
            }else this.$message.error(res.data.msg);
        })
      },
      initChartYkzsfxChart(chartData){
        let myChart = echarts.init(this.$refs.ykzsfxChart);
        let currentIndex = 0;
        let oldIndex;
        let data = [];
        let xData = [];
        var color = ['#0771FF', '#0CFF9A', '#EA3D75', '#FE5C12', '#B315FF'];
        for (var i = 0; i < chartData.length; i++) {
            data.push(
                {
                    value: chartData[i].value,
                    name: chartData[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 6,
                            shadowBlur: 10,
                            borderRadius: 10, // 圆角
                            borderColor: color[i],
                            shadowColor: color[i],
                            color: color[i]
                        }
                    }
                },
                {
                    value: 0.5,
                    name: '',
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                }
            );
            xData.push(chartData[i].name);
        }
        let option = {
            backgroundColor: '#0E1327',
            legend: {
                textStyle: {
                    color: "#373737",
                    fontSize: "12px",
                    rich: {
                        name: {
                            color: '#C6D7F1',
                            fontSize: 14,
                            width:120,
                            fontWeight: 400,
                            padding:[0,0,0,2]
                        },
                        bl:{
                            color: '#C6D7F1',
                            fontSize: 16,
                            fontWeight: 600,
                            fontFamily:'D-DINExp, D-DINExp',
                            padding:[0,0,0,-15]
                        }
                    }
                },
                top: "center",
                right: "5%",
                itemGap: 15,
                itemHeight: 14,
                itemWidth: 8,
                data: chartData.name,
                formatter: function(name){
                    let obj = {};
                    if (name){
                     obj = chartData.find(item=>item.name === name)
                    }
                    return `{name|${name}}{bl|${obj.bl || '0%'}}`
                },
                orient: 'vertical',
                icon: 'circle',
                data: xData,
            },
            grid: {
                containLabel: true,
            },
            series: [
                {
                    name: 'pie2',
                    type: 'pie',
                    radius: [78, 80],
                    center: ['35%', '50%'],
                    color: 'transparent',
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    data: [1],
                    silent: true
                },
                {
                    type: 'pie',
                    radius: ['65%', '70%'],
                    center: ['25%', '50%'],
                    grid: {
                        containLabel: true
                    },
                    label: {
                        show: false,
                        position: 'center',
                        formatter: '{c_style|{c}}\n{b_style|{b}}',
                        rich: {
                            b_style: {
                                color: "#C6D7F1",
                                fontSize: 14,
                                fontWeight: "400",
                                padding: [0, 0, 10, 0],
                            },
                            c_style: {
                                color: "#C6D7F1",
                                fontSize: 18,
                                fontWeight: "600",
                                fontFamily:'D-DINExp, D-DINExp'
                            }
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:data
                }
            ]
        }

        myChart.setOption(option);
        this.resizeEcharts(this.$refs.ykzsfxChart);
        // setTimeout(()=>{
        //     this.highlightPie(myChart,0,1);
        // },50)
        // myChart.on('mouseover', (params) => {
        //     oldIndex = currentIndex;
        //     currentIndex = params.dataIndex;
        //     this.highlightPie(myChart,currentIndex,oldIndex);
        // })
      },
      highlightPie(myChart,currentIndex,oldIndex) {
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 1,
            dataIndex: oldIndex
        })
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: currentIndex
        })
      },
      //入住率同比分析
      initChartRzltbfx(tidx){
        this.$http.post('/sys/hotel/screen/getCheckinDODAnalysis',{queryType:tidx==2?"0":"1"}).then(res=>{
            if(res.data.code===0){
                let Data = [];
                let sjlData = [];
                let bjlData = [];
                let balData = [];
                res.data.data.forEach(d=>{
                    Data.push(d.islandName);
                    sjlData.push(d.beforeVal);
                    bjlData.push(d.currentVal);
                    balData.push(d.ratio);
                })
                this.initChartRzltbfxChart(Data,sjlData,bjlData,balData);
            }else this.$message.error(res.data.msg);
        })
      },
      initChartRzltbfxChart(Data,sjlData,bjlData,balData){
        let myChart = echarts.init(this.$refs.rzltbfxChart);
        let basicColors = [
            ['#89FCCC','#00FF95'],
            ['#34ABFF','#006BFE']
        ];
        let option = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                borderColor: '#4ddd8f',
                padding: 5,
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                top: '25%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: Data,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        show: true,
                        length: 1,
                        lineStyle: {
                            color: 'rgba(199,211,229,0.5)'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(199,211,229,0.5)'
                        }
                    },
                    axisLabel: {
                        color: '#c7d3e5',
                        interval:0
                    }
                }
            ],
            yAxis: [
                {
                    name:'单位:人',
                    type: 'value',
                    nameTextStyle: {
                    color: '#c7d3e5'
                    },
                    axisLabel: {
                        color: '#c7d3e5',
                        formatter: function (value) {
                            // return value + '万';
                            return value;
                        }
                    },
                    axisTick: {
                        show: true,
                        length: 4,
                        lineStyle: {
                            color: 'rgba(64,136,254,1)'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(199,211,229,0.3)',
                            width: 1,
                            type: 'dashed'
                        }
                    }
                },
                {
                    type: 'value',
                    scale: true,
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed',
                            color: 'rgba(199,211,229,0.3)'
                        }
                    },
                    min: 0,
                    axisLabel : {
                        formatter: '{value}%',  //右侧以百分比进行展示
                        show: true,
                        textStyle: {
                            color: '#c7d3e5',
                        }
                    },
                    nameTextStyle: {
                        color: '#c7d3e5'
                    },
                    axisTick: {
                        show: true,
                        length: 4,
                        lineStyle: {
                            color: 'rgba(64,136,254,1)'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '同比人数',
                    type: 'bar',
                    barWidth: 6,
                    data: sjlData,
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(basicColors[0])
                        }
                    }
                },
                {
                    name: '实际入住人数',
                    type: 'bar',
                    barWidth: 6,
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(basicColors[1])
                        }
                    },
                    data: bjlData
                },
                {
                    name: '同比率(单位%)',
                    type: 'line',
                    smooth:true,
                    yAxisIndex: 1,
                    symbol: 'none',
                    data: balData,
                    itemStyle: {
                        color: '#CF346B'
                    }
                }
            ]
        };
        myChart.setOption(option);
        this.resizeEcharts(this.$refs.rzltbfxChart);
      },
      changeRzlType(type){
        this.tidx = type;
        this.initChartRzltbfx(this.tidx)
      },
      //酒店预约排行榜(月)
      getDataHotelOrderMonth(){
        this.hotelOrderList = [];
        this.$http.post('/sys/hotel/screen/getOrderVolumeRankList',{
            islandIds:this.myislandId
        }).then(res=>{
            if(res.data.code===0){
                res.data.data.forEach(d=>{
                    this.hotelOrderList.push({
                        name:d.homestayName,
                        num:d.orderNums
                    })
                })
                this.$nextTick(() => {
                    const scrollListDom = document.querySelector('.scroll-list-seamless-phb')
                    if (scrollListDom) {
                        const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                        let liLength = scrollListDom.querySelectorAll('li').length;
                        let liHeight = scrollListDomLast.clientHeight+10;
                        let liSumHeight = liHeight*liLength;
                        let parentHeight = document.querySelector('.tableDiv_phb').clientHeight;
                        let autoPlay = liSumHeight>parentHeight;
                        if (autoPlay) {
                            this.copyDataPhb = this.hotelOrderList;
                            this.$refs.vueSeamlessPhbRef._startMove();
                        }
                    }
                })
            }else this.$message.error(res.data.msg);
        })
      },

      //节假日入住分析
      initCahrtJjrrzfx(){
        this.$http.post('/sys/hotel/screen/getHotelVisitorFlow',{islandIds:this.myislandId}).then(res=>{
            if(res.data.code===0){
                let resData = res.data.data;
                this.jjrYearPersonNum = resData.headcount;
                let maxNum = resData.holidayNums>resData.workdayNums?resData.holidayNums:resData.workdayNums;
                let maxNumLen = maxNum.toString().length;
                let sfbl = maxNumLen==0?0:Math.pow(10,(maxNumLen==1?1:(maxNumLen-Math.pow(2,maxNumLen-1))));//缩放比例   1\1  2\0  3\-1  4\-2  5\-3 n-2的n-1次方

                this.initCahrtJjrrzfxChart(resData,sfbl);
            }else this.$message.error(res.data.msg);
        })
      },
      getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        h
      ) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        // if (startRatio === 0 && endRatio === 1) {
        //     isSelected = false;
        // }
        isSelected = false;
        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.sin(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.cos(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },

          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },

          x: function (u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          y: function (u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY +
                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },

          z: function (u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u) * h * 0.1;
            }
            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
          },
        };
      },
      // 生成模拟 3D 饼图的配置项
      getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
          typeof internalDiameterRatio !== "undefined"
            ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
            : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;

          let seriesItem = {
            name:
              typeof pieData[i].name === "undefined"
                ? `series${i}`
                : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: 1 / 10,
            },
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};

            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;

            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;

          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = this.getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
          );

          startValue = endValue;

          legendData.push(series[i].name);
        }
        return series;
      },
      initCahrtJjrrzfxChart(resData,sfbl){
        const optionsData = [
            {
                name: "工作日",
                value: resData.workdayNums,
                itemStyle: {
                    color: "#036FFE",
                }
            },
            {
                name: "节假日",
                value: resData.holidayNums,
                itemStyle: {
                    color: "#1CFFAC",
                }
            }
        ];
        const series = this.getPie3D(optionsData, 0.8);
        series.push({
            name: "pie2d",
            type: "pie",
            label: {
                show:false,
            },
            labelLine: {
                show:false,
            },
            startAngle: -30, //起始角度，支持范围[0, 360]。
            clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
            radius: ["40%", "60%"],
            center: ["50%", "50%"],
            data: optionsData,
            itemStyle: {
                opacity: 0,
            },
        });
        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
            legend: {
                orient: "vertical",
                data: ["工作日", "节假日"],
                textStyle: {
                    color: "#373737",
                    fontSize: "12px",
                    rich: {
                        name: {
                            color: '#C6D7F1',
                            fontSize: 14,
                            fontWeight: 400,
                            padding:[0,0,0,6]
                        },
                        num:{
                            color: '#C6D7F1',
                            fontSize: 14,
                            fontWeight: 'bold',
                            padding:[0,0,0,16]
                        },
                        bl:{
                            color: '#C6D7F1',
                            fontSize: 14,
                            fontWeight: 'bold',
                            padding:[0,0,0,16]
                        }
                    }
                },
                top: "center",
                right: "4%",
                itemGap: 22,
                itemHeight: 8,
                itemWidth: 8,
                formatter: function(name){
                    let bl = name=='工作日'?resData.workdayRatio:resData.holidayRatio;
                    let sz = name=='工作日'?resData.workdayNums:resData.holidayNums;
                    return `{name|${name}}{num|${sz}}{bl|${bl+'%' || '0%'}}`
                }
            },
            animation: true,
            tooltip: {
                formatter: (params) => {
                    if (
                        params.seriesName !== "mouseoutSeries" &&
                        params.seriesName !== "pie2d"
                    ) {
                        return `${
                            params.seriesName
                        }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                            params.color
                        };"></span>${
                            option.series[params.seriesIndex].pieData.value + "人"
                        }`;
                    }
                },
                textStyle: {
                    fontSize: 14,
                },
            },
            title: {
                x: "center",
                top: "20",
                textStyle: {
                    color: "#fff",
                    fontSize: 22,
                },
            },
            backgroundColor: "transparent",
            labelLine: {
                show: true,
                lineStyle: {
                    color: "#7BC0CB",
                },
                normal: {
                    show: true,
                    length: 10,
                    length2: 10,
                },
            },
            label: {
                show: true,
                position: "outside",
                formatter: "{b} \n{d}%",
                textStyle: {
                    color: "#fff",
                    fontSize: "14px",
                },
            },
            xAxis3D: {
                min: -1,
                max: 1,
            },
            yAxis3D: {
                min: -1,
                max: 1,
            },
            zAxis3D: {
                min: -1,
                max: 1,
            },
            grid3D: {
                show: false,
                boxHeight: sfbl*8,
                //top: '30%',
                left: "1%",
                top: -15,
                width: "60%",
                // environment: "rgba(255,255,255,0)",
                viewControl: {
                    distance: 130,
                    alpha: 35,
                    beta: 15,
                    autoRotate: false, // 自动旋转
                    rotateSensitivity: 1,
                    zoomSensitivity: 0,
                    panSensitivity: 0,
                }
            },
            series: series,
        };
        //构建3d饼状图
        let myChart = echarts.init(this.$refs.jjrrzfxChart);
        myChart.setOption(option);
        this.resizeEcharts(this.$refs.jjrrzfxChart);
      },

      //近7天预约趋势
      initChartYyqs(){
        this.$http.post('/sys/hotel/screen/getNext7DaysBookTrends',{
            islandIds:this.myislandId
        }).then(res=>{
            if(res.data.code===0){
                let Data = [];
                let yzyData = [];
                let yyyData = [];
                let kzData = [];
                let bhlData = [];
                res.data.data.forEach(d=>{
                    Data.push(d.dateDay);
                    yzyData.push(d.usageRooms);
                    yyyData.push(d.bookRooms);
                    kzData.push(d.vacantRooms);
                    bhlData.push(d.ratio);
                })
                this.initChartYyqsChart(Data,yzyData,yyyData,kzData,bhlData);
            }else this.$message.error(res.data.msg);
        })
      },
      initChartYyqsChart(Data,yzyData,yyyData,kzData,bhlData){
        let myChart = echarts.init(this.$refs.yyqsChart);
        let basicColors = [
            ['#89FCCC','#00FF95'],
            ['#34ABFF','#006BFE'],
            ['#FF89B0','#E83B75']
        ];
        let option = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                borderColor: '#4ddd8f',
                padding: 5,
                textStyle: {
                    color: '#fff'
                }
            },
            grid: {
                top: '25%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            legend: {
                right: 10,
                top: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#7299D4'
                },
                itemWidth: 8,
                itemHeight: 8
            },
            xAxis: [
                {
                    type: 'category',
                    data: Data,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        show: true,
                        length: 4,
                        lineStyle: {
                            color: 'rgba(199,211,229,0.5)'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(199,211,229,0.5)'
                        }
                    },
                    axisLabel: {
                        color: '#c7d3e5'
                    }
                }
            ],
            yAxis: [
                {
                    name:'单位:人',
                    type: 'value',
                    nameTextStyle: {
                    color: '#c7d3e5'
                    },
                    axisLabel: {
                        color: '#c7d3e5'
                    },
                    axisTick: {
                        show: true,
                        length: 4,
                        lineStyle: {
                            color: 'rgba(64,136,254,1)'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(199,211,229,0.3)',
                            width: 1,
                            type: 'dashed'
                        }
                    }
                },
                {
                    type: 'value',
                    scale: true,
                    splitLine:{
                        show:true,
                        lineStyle:{
                            type:'dashed',
                            color: 'rgba(199,211,229,0.3)'
                        }
                    },
                    min: 0,
                    axisLabel : {
                        formatter: '{value}%',  //右侧以百分比进行展示
                        show: true,
                        textStyle: {
                            color: '#c7d3e5',
                        }
                    },
                    nameTextStyle: {
                        color: '#c7d3e5'
                    },
                    axisTick: {
                        show: true,
                        length: 4,
                        lineStyle: {
                            color: 'rgba(64,136,254,1)'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '已占用',
                    type: 'bar',
                    barWidth: 6,
                    data: yzyData,
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(basicColors[0]),
                            barBorderRadius: 3
                        }
                    }
                },
                {
                    name: '已预约',
                    type: 'bar',
                    barWidth: 6,
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(basicColors[1]),
                            barBorderRadius: 3
                        }
                    },
                    data: yyyData
                },
                {
                    name: '空置',
                    type: 'bar',
                    barWidth: 6,
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(basicColors[2]),
                            barBorderRadius: 3
                        }
                    },
                    data: kzData
                },
                {
                    name: '订单饱和率',
                    type: 'line',
                    smooth:true,
                    yAxisIndex: 1,
                    symbol: 'none',
                    data: bhlData,
                    itemStyle: {
                        color: '#B315FF'
                    }
                }
            ]
        };
        myChart.setOption(option);
        this.resizeEcharts(this.$refs.yyqsChart);
      },
      // 生成渐变色
      genLinearGradient(colors) {
        const color = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
            {
                offset: 0,
                color: colors[0] // 0%处的颜色
            },
            {
                offset: 1,
                color: colors[1] // 100%处的颜色
            }
            ],
            global: false
        }
        return color
      },
      //年度预约趋势
      initChartNdyyqs(){
        this.$http.post('/sys/hotel/screen/getAnnualBookTrends',{
            islandIds:this.myislandId
        }).then(res=>{
            if(res.data.code===0){
                let currentYear = new Date().getFullYear();
                let lastYear = currentYear - 1;
                let cyData = res.data.data.filter(d=>d.dateYear==currentYear);
                let lyData = res.data.data.filter(d=>d.dateYear==lastYear);

                let Data = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                let lastYearData = [];
                let currentYearData = [];
                Data.forEach(d=>{
                    let ct = cyData.find(c=>c.dateMonth==d);
                    let lt = lyData.find(l=>l.dateMonth==d);
                    currentYearData.push(ct?ct.visitorNums:0);
                    lastYearData.push(lt?lt.visitorNums:0);
                })
                let xData = [];
                Data.forEach(d=>xData.push(d+"月"));
                this.initChartNdyyqsChart(lastYear,currentYear,xData,lastYearData,currentYearData);
            }else this.$message.error(res.data.msg);
        })
      },
      initChartNdyyqsChart(lastYear,currentYear,Data,lastYearData,currentYearData){
        let myChart = echarts.init(this.$refs.ndyyqsChart);
        const offsetX = 8;
        const offsetY = 4;
        // 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                // 会canvas的应该都能看得懂，shape是从custom传入的
                const xAxisPoint = shape.xAxisPoint;
                const c0 = [shape.x, shape.y];
                const c1 = [shape.x - offsetX, shape.y - offsetY];
                const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                const c3 = [xAxisPoint[0], xAxisPoint[1]];
                ctx
                    .moveTo(c0[0], c0[1])
                    .lineTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .closePath();
            },
        });
        // 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint;
                const c1 = [shape.x, shape.y];
                const c2 = [xAxisPoint[0], xAxisPoint[1]];
                const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                const c4 = [shape.x + offsetX, shape.y - offsetY];
                ctx
                    .moveTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .lineTo(c4[0], c4[1])
                    .closePath();
            },
        });
        // 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
            shape: {
                x: 0,
                y: 0,
            },
            buildPath: function (ctx, shape) {
                const c1 = [shape.x, shape.y];
                const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                const c3 = [shape.x, shape.y - offsetX];
                const c4 = [shape.x - offsetX, shape.y - offsetY];
                ctx
                    .moveTo(c1[0], c1[1])
                    .lineTo(c2[0], c2[1])
                    .lineTo(c3[0], c3[1])
                    .lineTo(c4[0], c4[1])
                    .closePath();
            },
        });

        // 注册三个面图形
        echarts.graphic.registerShape("CubeLeft", CubeLeft);
        echarts.graphic.registerShape("CubeRight", CubeRight);
        echarts.graphic.registerShape("CubeTop", CubeTop);

        let option = {
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                borderColor: '#4ddd8f',
                padding: 5,
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                right: 10,
                top: 0,
                textStyle: {
                    fontSize: 14,
                    color: '#C6D7F1'
                },
                itemWidth: 20,
                itemHeight: 6
            },
            grid: {
                left: '1%',
                right: '0%',
                top: '20%',
                bottom: '6%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: Data,
                axisPointer: {
                    type: 'shadow'
                },
                axisTick: {
                    show: true,
                    length: 4,
                    lineStyle: {
                        color: 'rgba(199,211,229,0.5)'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(199,211,229,0.5)'
                    }
                },
                axisLabel: {
                    color: '#c7d3e5'
                }
            },
            yAxis: {
                name:'单位:人',
                type: 'value',
                nameTextStyle: {
                    fontSize: 12,
                    color: '#C6D7F1',
                    fontWeight: 400,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 1,
                        color: '#545454'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(199,211,229,0.3)',
                        width: 1,
                        type: 'dashed'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    fontSize: 12,
                    color: '#c7d3e5'
                }
            },
            series: [{
                    name: lastYear+"年",
                    type: "custom",
                    renderItem: (params, api) => {
                        const location = api.coord([api.value(0), api.value(1)]);
                        const xAxisPoint = api.coord([api.value(0), 0]);
                        const distance = 15;
                        return {
                            type: "group",
                            children: [{
                                    type: "CubeLeft",
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0] - distance,
                                        y: location[1],
                                        xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#00BFF4',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,100,181,0.14)'
                                            }
                                        ]),
                                    },
                                },
                                {
                                    type: "CubeRight",
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0] - distance,
                                        y: location[1],
                                        xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#006DFF',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,100,181,0.14)'
                                            }
                                        ]),
                                    },
                                },
                                {
                                    type: "CubeTop",
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0] - distance,
                                        y: location[1],
                                        xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#00BFF4',
                                            },
                                            {
                                                offset: 1,
                                                color: '#A5E2FF'
                                            }
                                        ]),
                                    },
                                },
                            ],
                        };
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#6AAAFF",
                            },
                            {
                                offset: 1,
                                color: "#046EFE",
                            },
                        ]),
                    },
                    data: lastYearData,
                },
                {
                    name: currentYear+"年",
                    type: "custom",
                    renderItem: (params, api) => {
                        const location = api.coord([api.value(0), api.value(1)]);
                        const xAxisPoint = api.coord([api.value(0), 0]);
                        const distance = 15;
                        return {
                            type: "group",
                            children: [{
                                    type: "CubeLeft",
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0] + distance,
                                        y: location[1],
                                        xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#02D8EA',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,201,217,0.4)'
                                            }
                                        ]),
                                    },
                                },
                                {
                                    type: "CubeRight",
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0] + distance,
                                        y: location[1],
                                        xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#02D8EA',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,201,217,0.4)'
                                            }
                                        ]),
                                    },
                                },
                                {
                                    type: "CubeTop",
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0] + distance,
                                        y: location[1],
                                        xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#00BFF4',
                                            },
                                            {
                                                offset: 1,
                                                color: '#A5E2FF'
                                            }
                                        ]),
                                    },
                                },
                            ],
                        };
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#00BFF4",
                            },
                            {
                                offset: 1,
                                color: "#A5E2FF",
                            },
                        ]),
                    },
                    data: currentYearData,
                }
            ],
        };
        myChart.setOption(option);
        this.resizeEcharts(this.$refs.ndyyqsChart);
      },
      //游客精准营销
      getDataRank(){
        this.klRankingList = [];
        this.$http.post('/sys/hotel/screen/getHotCityRankList',{
            islandIds:this.myislandId
        }).then(res=>{
            if(res.data.code===0){
                let sum = res.data.data.reduce((cur,pre)=>cur+pre.visitorNums,0);
                res.data.data.forEach(d=>{
                    this.klRankingList.push({
                        city:d.cityName,
                        num:d.visitorNums,
                        bl:(d.visitorNums/sum*100).toFixed(2)||0
                    })
                })
                this.$nextTick(() => {
                    const scrollListDom = document.querySelector('.scroll-list-seamless')
                    if (scrollListDom) {
                        const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                        let liLength = scrollListDom.querySelectorAll('li').length;
                        let liHeight = scrollListDomLast.clientHeight;
                        let liSumHeight = liHeight*liLength;
                        let parentHeight = document.querySelector('.mjzyx_pm').clientHeight;
                        let autoPlay = liSumHeight>parentHeight;
                        if (autoPlay) {
                            this.copyDataRank = this.klRankingList;
                            this.$refs.vueSeamlessRef._startMove();
                        }
                    }
                })
            }else this.$message.error(res.data.msg);
        })
      },
      //解决图表鼠标悬浮错位问题
      resizeEcharts(ele) {
        let rate = 1920 / window.innerWidth;
        if ( ele.style ) {
            ele.style.zoom = 1 * rate;
            ele.style.transform = `scale(${1 / rate})`;
            ele.style.transformOrigin = 'top left';
        }
      },
      //切换岛屿
      changeTown(id,index){
        this.townIndex = index;
        if(!id) return
        this.myislandId = id;
        //图表初始化
        this.initTopData();//头部统计数据
        this.initChartYkzsfx();//游客住宿分析
        this.initChartRzltbfx(this.tidx);//入住率同比分析
        // this.getDataHotelOrderMonth();//酒店预约排行榜(月)
        this.initCahrtJjrrzfx();//节假日入住分析
        this.initChartYyqs();//近7天预约趋势
        this.initChartNdyyqs();//年度预约趋势
        this.getDataRank();//游客精准营销
      }
    },
    watch: {},
  }
</script>

<style lang="scss" scoped >
    .Statisticalanalysis{
        width: 100%;
        height: 32%;
        background: #0ea55d;
    }
    .mapdiv img{
        width: 100%;
        height:100%;
    }
.mapdiv{
    width: 100%;
    height:66%;
}
.Bottomlandscaping{
    height: 47px;
    width:calc(100% - 60px);
    margin: 0 auto;
    background: url("../../../assets/largescreen/y10.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.mybar{
    flex-grow: 1;
    width: 100%;
}
    .malepicdiv2{
        width: 100%;
        height: 30%;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 30px;
        text-align: center;
    }
.malepicdiv1{
    width: 70px;
    height: 70%;
    margin: 0 auto;
}
.malepicdiv{
    width: 25%;
    height: 100%;
}
.malepic{
    flex-grow: 1;
    width: 100%;
   display: flex;
}
.male2{
    width:100%;
    height:45px;
    font-size: 20px;
    font-family: DINAlternate, DINAlternate;
    font-weight: bold;
    color: #C6D7F1;
    line-height: 25px;
    text-align: right;
    padding-right: 40px;
}
.male1{
    width:100%;
    height:45px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #C6D7F1;
    line-height: 55px;
    text-align: right;
    padding-right: 60px;
}
    .Featureanalyimgsis2{
        width: 48%;
        height:90px;
        background: url("../../../assets/largescreen/y9.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    .Featureanalyimgsis1{
        width: 48%;
        height:90px;
        background: url("../../../assets/largescreen/y8.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
.Featureanalysis{
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Piechart{
    width: 100%;
    flex-grow: 1;
}
    .Passengerflow1 img{
        width: 24px;
        height: 24px;
    }
.Passengerflow1{
    width: 24px;
    height: 24px;
    margin-right: 15px;
}
    .Passengerflow3{
        height: 40px;
        font-size: 18px;
        font-family: DINAlternate, DINAlternate;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 40px;
        padding: 0 10px;
    }
.Passengerflow2{
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 40px;
}
.Passengerflow{
    width: 100%;
    height: 40px;
    background: linear-gradient(270deg, rgba(39,115,255,0.4) 0%, rgba(39,115,255,0.25) 23%, rgba(39,115,255,0.06) 100%);
    border-radius: 2px;
    border: 1px solid #294178;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
    .moduledivtop{
        width: 100%;
        height: 44px;
        background: url("../../../assets/largescreen/y6.png");
        background-repeat: no-repeat;
        // background-size: cover;
        // background-position: center center;
        padding-left: 35px;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        line-height: 38px;
    }
.modulediv{
    width: 100%;
    height: 32%;
    display: flex;
    flex-direction: column;

    &.modulediv_jzyx{
        height: 66%;
    }
    .numsdiv{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .numsdiv_pre{
            display: flex;
            flex-direction: column;
            align-items: center;
            &.numsdiv_pre_mszs{
                margin: 0 46px;
            }
            .np_title{
                font-size: 20px;
                font-family: PingFangHK, PingFangHK;
                font-weight: 500;
                color: #C6D7F1;
                line-height: 28px;
            }
            .np_num{
                display: flex;
                align-items: center;
                .npn_item{
                    width: 40px;
                    height: 56px;
                    line-height: 56px;
                    text-align: center;
                    background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                    background-size: 100% 100%;
                    margin: 5px 2px 0 2px;
                    font-size: 30px;
                    font-family: D-DINExp, D-DINExp;
                    font-weight: bold;
                    color: #C6D7F1;
                }
                .npn_dw{
                    height: 56px;
                    line-height: 56px;
                    padding: 0 5px;
                    font-size: 16px;
                    font-family: PingFangHK, PingFangHK;
                    font-weight: 500;
                    color: #C6D7F1;
                }
            }
        }
    }
    .md_map{
        margin-top: 11px;
        height: calc(100% - 100px);
        .mapdiv{
            height: 100%;
            position: relative;
            background: url('../../../assets/largescreen/y11.png') no-repeat;
            background-size: 100% 100%;
            .mapdiv_town{
                width: 68px;
                height: 41px;
                background: url('../../../assets//largescreen/town_bg.png');
                position: absolute;
                font-size: 16px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                color: #FFFFFF;
                text-align: center;
                padding-top: 5px;
                cursor: pointer;
                &.town_active{
                    width: 84px;
                    height: 78px;
                    background: url('../../../assets//largescreen/town_active_bg.png');
                    padding-top: 8px;
                    margin-left: -8px;
                    margin-top: -37px;
                }
            }
        }
    }

    .chartBox{
        width: 100%;
        height: calc(100% - 44px);
        position: relative;
        .cb_chart{
            width: 100%;
            height: 100%;
        }
        .cb_tab{
            position: absolute;
            width: 56px;
            height: 24px;
            border-radius: 1px;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
            display: flex;
            align-items: center;
            right: 20px;
            top: 0;
            z-index: 99999;
            &>div{
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(180deg, #15203C 0%, #142544 100%);
                font-size: 12px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #6D7D99;
                cursor: pointer;
                &.active{
                    color: #C6D7F1;
                    background: linear-gradient(180deg, #273F7C 0%, #4566BC 100%);
                }
            }
        }

        .cb_title{
            width: calc(100% - 20px);
            height: 40px;
            background: linear-gradient(270deg, rgba(39,115,255,0.4) 0%, rgba(39,115,255,0.25) 23%, rgba(39,115,255,0.06) 100%);
            border-radius: 2px;
            border: 1px solid #294178;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px 10px 0;
            img{
                width: 24px;
                height: 24px;
            }
            p{
                margin-left: 20px;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
                display: flex;
                align-items: center;
                span{
                    font-size: 18px;
                    font-family: DINAlternate, DINAlternate;
                    font-weight: bold;
                    color: #FFFFFF;
                    margin: 0 10px;
                }
            }
        }
        .cb_chart_jjr{
            height: calc(100% - 50px) !important;
            &>div{
                width: 100%;
                height: 100%;
            }
        }
    }

    .tableDiv{
        width: 100%;
        height: calc(100% - 44px);
        overflow: hidden;
        .td_item{
            width: calc(100% - 10px);
            height: 32px;
            margin: 10px 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: 29px;
            box-sizing: border-box;
            background: rgba(2,65,110,0.3);
            .tdi_left{
                display: flex;
                align-items: center;
                .tdil_top{
                    width: 47px;
                    height: 24px;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    line-height: 24px;
                    text-align: center;
                    font-size: 12px;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                }
                .tdil_name{
                    margin-left: 16px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C6D7F1;
                }
            }
            .tdi_right{
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
    }

    .mjzyx_top{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .mjzyxt_item{
            width: calc(50% - 9px);
            height: 88px;
            display: flex;
            flex-direction: column;
            justify-content:center;
            // align-items:end;
            align-items: flex-end;
            &:first-child{
                background: url(../../../assets/largescreen/ggtf_bg.png) no-repeat;
                background-size: 100% 100%;
            }
            &:last-child{
                background: url(../../../assets/largescreen/lxtg_bg.png) no-repeat;
                background-size: 100% 100%;
            }
            .mti_text{
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #7299D4;
            }
            .mti_num{
                display:flex;
                align-items:center;
                font-size: 20px;
                font-family: D-DINExp, D-DINExp;
                font-weight: bold;
                color: #C6D7F1;
                margin-top:6px;
                span{
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #7299D4;
                    margin-left:4px;
                }
            }
            &>div{
                margin-right: 12px;
            }
        }
    }

    .mpm_title{
        width:100%;
        padding:0 20px;
        font-size: 18px;
        font-family: YouSheBiaoTiHei;
        color: #C6D7F1;
        line-height: 16px;
        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position:relative;
        margin-bottom:10px;
        z-index:1;
        &::after{
            content:'';
            position:absolute;
            width:64px;
            height: 10px;
            background: linear-gradient(90deg, rgba(39,115,255,0.4) 0%, rgba(39,115,255,0.25) 23%, rgba(39,115,255,0.06) 100%);
            left:20px;
            bottom:-4px;
            z-index:0;
        }
    }
    .mjzyx_pm{
        width:100%;
        height:calc(100% - 194px);
        padding:0 20px;
        overflow:hidden;
        .mpm_item{
            width:100%;
            height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            .mpmi_left{
                width:calc(100% - 80px);
                display:flex;
                align-items:center;
                .mpmil_top{
                    width:47px;
                    height:24px;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size: 12px;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                }
                .mpmil_city{
                    margin-left:20px;
                    font-size: 14px;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #C6D7F1;
                    text-align:right;
                }
                .mpmil_line{
                    width:1px;
                    height:42px;
                    background:#0A2840;
                    margin-left:10px;
                }
                .mpmil_bl{
                    width:calc(100% - 120px);
                    height: 6px;
                    background: #172640;
                    border-radius:0 3px 3px 0;
                    position:relative;
                    .mpmil_bl_bfb{
                        height:100%;
                        background: linear-gradient(270deg, #00BFF4 0%, rgba(4,110,255,0) 100%);
                        border-radius:0 3px 3px 0;
                    }
                }
            }
            .mpmi_right{
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
    }
    .ul-scoll{
        padding-left:0;
    }
}
.divbg{
    background: linear-gradient(180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), linear-gradient(180deg, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
}
.Intermediatemodule{
    width:49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.Leftsidemodule,.Rightmodule{
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.Touristbottomportrait{
    width:calc(100% - 60px);
    height:calc(100% - 136px);
    margin: 0 auto;
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}
.Bottomlandscaping{
    height: 47px;
    width:calc(100% - 60px);
    margin: 0 auto;
    background: url("../../../assets/largescreen/y10.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.selectdada{
    color: #FFFFFF!important;
}
    .Navigationimgright{
        width: 183px;
        height: 50px;
        line-height: 50px;
        background: url("../../../assets/largescreen/y5.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        align-items: center;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #79A5CB;
        text-align: center;
        cursor: pointer;
    }
    .Navigationimg{
        cursor: pointer;
        width: 183px;
        height: 50px;
        line-height: 50px;
        background: url("../../../assets/largescreen/y4.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        align-items: center;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #79A5CB;
        text-align: center;
    }
.Navigationright{
    width:calc(50% - 310px);
    height: 50px;
    display: flex;
    align-items: center;
    justify-content:flex-start;
}
    .Navigationleft{
        width:calc(50% - 310px);
        height: 50px;
        display: flex;
        justify-content:flex-end;
        align-items: center;
    }
   .Navigationmiddle{
       width:360px;
       height: 89px;
       font-size: 40px;
       font-family: YouSheBiaoTiHei;
       color: #FFFFFF;
       line-height: 60px;
       background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center;
     font-weight: bold;
   }
.Navigation{
    flex-grow: 1;
    height: 89px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.weathertext{
    width: 110px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 22px;
}
    .weatherimg img{
        width: 24px;
        height: 22px;
    }
.weatherimg{
    width: 24px;
    height: 22px;
    margin-left: 10px;
    margin-right: 5px;
}


    .mydate {
        width: 260px;
        height: 22px;
        font-size: 16px;
        font-family: Helvetica;
        color: #C6D7F1;
        line-height: 22px;
        padding-right: 30px;
        text-align: right;
    }
    .fanhuimain {
        width: 102px;
        height: 38px;
        margin-left: 30px;
    }
    .fanhuimain img{
        width: 102px;
        height: 38px;
    }
    .weather {
        width: 260px;
        height: 22px;
        display: flex;
        align-items: center;
    }
        .Touristportrait{
    width: 100%;
    height: 89px;
    background: url("../../../assets/largescreen/y2.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .maindivwc{
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
    }
    .maindiv {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        /*zoom:1;*/
        background: url("../../../assets/largescreen/y1.png");
        /*background: #F1F4F5;*/
        width: 100%;
        height: 100%;
        background-size: 100% 100%;

        display: flex;
        flex-direction: column;
    }
</style>
